import moment from 'moment';
import React from 'react';
import { SingleDateC, SecondHeaderC, PrimaryC } from '../../components';
import { Form } from 'antd';

class SingleDateCDemo extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  query = () => {
    const value = this.formRef.current.getFieldsValue();
    console.log('date2', value.date2);
    this.setState({});
  };

  render() {
    return (
      <Form ref={this.formRef} style={{ padding: '20px', width: '800px' }} labelWrap={true}>
        <SecondHeaderC title='年月日' />
        <SingleDateC
          form={this.formRef.current}
          title='日期选择日期选择日期选择日期选择日期选择' // 显示名称
          dataIndex='date1' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          // initialValue={moment('2020-06-01')}
          placeholder='请选择日期时间'
          disableBegin={moment('2023-07-01')}
          disableEnd={moment('2023-07-31')}
          helper='点击选择时间'
          onOpenChange={(e) => {
            console.log('data1', e);
          }}
        />
        <SecondHeaderC title='禁选非银行间交易日/交易所交易日' />
        {/* 默认从当前年的开始进行禁用 */}
        <SingleDateC
          form={this.formRef.current}
          title='日期选择' // 显示名称
          dataIndex='date2' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment(new Date()).add(-1, 'days')}
          disableEnd={moment()}
          useDisabledDate={{
            calendarType: 2, // {calendarType: 1}-交易所 {calendarType: 2}银行间
          }}
        />
        <PrimaryC title='查询' onClick={this.query} />
        <SecondHeaderC title='年月-value值就是YYYYY-MM' />
        <SingleDateC
          form={this.formRef.current}
          title='日期选择' // 显示名称
          dataIndex='date3' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment('2023-01')}
          disableBegin={moment('2022-12')}
          disableEnd={moment('2023-06')}
          dataType='month'
        />
        <SecondHeaderC title='年月-value值就是YYYYY-MM-DD~YYYY-MM-DD' />
        <SingleDateC
          form={this.formRef.current}
          title='日期选择' // 显示名称
          dataIndex='date4' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment('2023-01')}
          dataType='month'
          valueType='range'
        />
        <SecondHeaderC title='年月日' />
        <SingleDateC
          form={this.formRef.current}
          title='日期选择' // 显示名称
          dataIndex='date5' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment('2023-01')}
          dataType='date'
          rules={[{ required: true, message: '请选择日期进行后续操作' }]}
          onOpenChange={(e) => {
            console.log('data5', e);
          }}
        />
      </Form>
    );
  }
}

export default SingleDateCDemo;
